<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-11-05 11:04:10
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-11-05 11:24:38
 * @FilePath: \hy-ui\src\views\trainingCenter\components\planDetail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="planDetail">
    <el-dialog
      title="培训计划详情"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <div class="planDetailMain">
        <div class="planDetailItem">
            <div class="title">基础信息</div>
            <div class="item"><span>计划名称:</span>测试培训计划</div>
            <div class="item"><span>起始时间:</span>{{ `${"2024-11-04 09:00:00"}  至  ${"2024-11-20 18:00:00"}` }}</div>
            <div class="item"><span>状态:</span><el-tag type="success">进行中</el-tag></div>
            <div class="item"><span>参与人:</span><el-tag >刘颜星</el-tag><el-tag >赵克强</el-tag></div>
        </div>
        <div class="planDetailItem">
            <div class="title">培训信息</div>
            <div class="item"><span>培训类型:</span>测试培训计划</div>
            <div class="item"><span>负责人:</span><el-tag type="success">刘颜星</el-tag></div>
            <div class="item"><span>讲师:</span><el-tag >刘颜星</el-tag></div>
        </div>
        <div class="planDetailItem">
            <div class="title">考试信息</div>
            <div class="item"><span>考试类型:</span>线下考试</div>
            <div class="item"><span>负责人:</span><el-tag type="success">刘颜星</el-tag></div>
            <div class="item"><span>考官:</span><el-tag >刘颜星</el-tag></div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["dialogVisible", "handleClose"],
};
</script>

<style lang="scss" scoped>
.planDetail {
    ::v-deep .el-dialog__body {
        padding-top: 0;
    }
    .planDetailMain {
        padding: 20px;
        padding-top: 0;
        .planDetailItem {
            margin-top: 20px;
            .title {
                margin-bottom: 12px;
                font-size: 18px;
                color: #333;
                font-weight: bold;
            }
            .item{
                margin-top: 12px;
                color: #666;
                font-size: 14px;
                width: 100%;
                overflow: hidden;
                ::v-deep .el-tag {
                    margin-right: 12px;
                }
                &>span:nth-of-type(1) {
                    margin-right: 12px;
                    display: inline-block;
                    width: 80px;
                    text-align: left;
                }
            }
        }
    }
}
</style>